<template>
  <div class="voteSet">
    <el-form ref="voteSetDetail" :model="voteSetDetail" label-width="120px">
      <el-form-item label="周期设置">
        <div class="heiList_wrap">
          <div
            :class="{ active: currentIndex === index }"
            class="item"
            v-for="(item, index) in period"
            @click="handleperioded(item, index)"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="wxVote">
          <div v-if="voteSetDetail.period == 'FIXED_FREQUENCY'">
            <span>每个微信号活动期间可投票</span>
            <el-input
              type="number"
              @change="handlePeriodFixedTimes"
              v-model.number="voteSetDetail.periodFixedTimes"
            ></el-input>
            <span class="frequency">次</span>
          </div>
          <div v-if="voteSetDetail.period == 'EVERY_DAY_FREQUENCY'">
            <span>每个微信号每天可投票</span>
            <el-input
              type="number"
              v-model.number="voteSetDetail.periodEveryDayFixedTimes"
              @change="handlePeriodEveryDayFixedTimes"
            ></el-input>
            <span class="frequency">次</span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="投票类型">
        <div>
          <!-- <el-radio-group v-model="voteSetDetail.type" @change="handleType">
            <el-radio
              v-for="(item, index) in type"
              :key="index"
              :label="item.value"
              >{{ item.name }}</el-radio
            >
          </el-radio-group> -->
          <div class="type_wrap">
            <div
              :class="{ active: currentIndexType === index }"
              class="item"
              v-for="(item, index) in type"
              @click="handletype(item, index)"
              :key="index"
            >
              {{ item.name }}
            </div>
          </div>
          <template v-if="voteSetDetail.type == 'MULTIPLE_CHOICE'">
            <div class="wxVote">
              <div>
                <span>最小选择</span>
                <el-input
                  type="number"
                  v-model.number="voteSetDetail.typeMultipleChoiceMinValue"
                  @change="handleTypeMultipleChoiceMinValue"
                ></el-input>
                <span class="frequency">位选手</span>
              </div>
              <div>
                <span>最多选择</span>
                <el-input
                  type="number"
                  @change="handleTypeMultipleChoiceMaxValue"
                  v-model="voteSetDetail.typeMultipleChoiceMaxValue"
                ></el-input>
                <span class="frequency">位选手</span>
              </div>
            </div>
          </template>
          <template v-if="voteSetDetail.type == 'REQUIRED_CHOICE'">
            <div class="wxVote">
              <div>
                <span>必须选择</span>
                <el-input
                  type="number"
                  @change="handleTypeRequiredChoiceValue"
                  v-model="voteSetDetail.typeRequiredChoiceValue"
                ></el-input>
                <span class="frequency">位选手</span>
              </div>
            </div>
          </template>
        </div>
      </el-form-item>
      <el-form-item label="微信公众号">
        <!-- <el-row>
          <el-button type="primary" @click="handleWechat">去关注</el-button>
        </el-row> -->
        <div class="foucs">
          <div>
            <span style="color: #afacac">关注后投票</span>
            <el-switch
              @change="handleWechatVote"
              v-model="voteSetDetail.followedVoting"
            >
            </el-switch>
          </div>
          <div class="signup">
            <span style="color: #afacac">关注后报名</span>
            <el-switch
              @change="handleWechatSign"
              v-model="wechatSigns.followedSignup"
            >
            </el-switch>
          </div>
        </div>
      </el-form-item>
      <!-- <el-form-item> </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true,
      current: 0,
      current2: 0,
      voteId: Number(this.$route.query.id),
      voteSetDetail: {},
      // wechatVotes: {},
      wechatSigns: {},
      period: [],
      type: [],
      currentIndex: 0,
      currentIndexType: 0,
      copyInfo:{}
    };
  },
  created() {
    // this.getWechatVote();
    this.getWechatSign();
    this.getPeriod();
  },
  methods: {
    handleperioded(item, index) {
      console.log(item, index);
      this.currentIndex = index;
      this.voteSetDetail.period = item.value;
      this.saveApi();
    },
    handletype(item, index) {
      console.log(item, index);
      this.currentIndexType = index;
      this.voteSetDetail.type = item.value;
      this.saveApi();
    },
    getPeriod() {
      this.$api("voteSet.period").then((res) => {
        this.period = res;
        this.getType();
      });
    },
    getType() {
      this.$api("voteSet.type").then((res) => {
        this.type = res;
        this.getVoteSet();
      });
    },
    getVoteSet() {
      this.$api("voteSet.getVoteSet", {
        voteId: this.voteId,
      }).then((res) => {
        console.log(res);
        this.voteSetDetail = res;
        this.copyInfo=JSON.parse(JSON.stringify(res))
        this.currentIndex = this.period.findIndex(
          (item) => item.value == res.period
        );
        this.currentIndexType = this.type.findIndex(
          (item) => item.value == res.type
        );
      });
    },
    periodClick(i) {
      this.current = i;
    },
    typeClick(i2) {
      this.current2 = i2;
    },
    saveApi() {
      this.$api("voteSet.saveVoteSet", {
        ...this.voteSetDetail,
        voteId: this.voteId,
      }).then((res) => {
        this.$store.commit("status/SET_URL", new Date().getTime());
        console.log(res);
        this.$message({
          message: "保存成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    handlePeriod() {
      this.saveApi();
    },
    handlePeriodFixedTimes() {
      if (this.voteSetDetail.periodFixedTimes < 1) {
        this.$message({
          message: "最少输入1",
          type: "error",
          duration: 1000,
        });
      } else {
        this.saveApi();
      }
    },
    handlePeriodEveryDayFixedTimes() {
      if (this.voteSetDetail.periodEveryDayFixedTimes < 1) {
        this.$message({
          message: "最少输入1",
          type: "error",
          duration: 1000,
        });
      } else {
        this.saveApi();
      }
    },
    handleTypeMultipleChoiceMinValue() {
      if (this.voteSetDetail.typeMultipleChoiceMinValue < 1) {
        this.$message({
          message: "最少输入1",
          type: "error",
          duration: 1000,
        });
      } else {
        this.saveApi();
      }
    },
    handleTypeMultipleChoiceMaxValue() {
      if (this.voteSetDetail.typeMultipleChoiceMaxValue < 1) {
        this.$message({
          message: "最少输入1",
          type: "error",
          duration: 1000,
        });
      } else {
        this.saveApi();
      }
    },
    handleTypeRequiredChoiceValue() {
      if (this.voteSetDetail.typeRequiredChoiceValue < 2  || this.voteSetDetail.typeRequiredChoiceValue>20) {
        this.voteSetDetail.typeRequiredChoiceValue=this.copyInfo.typeRequiredChoiceValue
        this.$message({
          message: "输入值范围在2~20",
          type: "error",
          duration: 2000,
        });
      } else {
        this.saveApi();
      }
    },
    // handleType() {
    //   this.saveApi();
    // },
    // getWechatVote() {
    //   this.$api("voteSet.getWechatVote", {
    //     voteId: this.voteId,
    //   }).then((res) => {
    //     console.log(res);
    //     this.wechatVotes = res;
    //   });
    // },
    getWechatSign() {
      this.$api("voteSet.getWechatSign", {
        voteId: this.voteId,
      }).then((res) => {
        console.log(res);
        this.wechatSigns = res;
      });
    },
    handleWechatVote() {
      this.saveApi();
      // this.$api("voteSet.saveWechatVote", {
      //   ...this.wechatVotes,
      //   voteId: this.voteId,
      // }).then((res) => {
      //   this.$store.commit("status/SET_URL", new Date().getTime());
      //   console.log(res);
      //   this.$message({
      //     message: "保存成功",
      //     type: "success",
      //     duration: 1000,
      //   });
      // });
    },
    handleWechatSign() {
      this.$api("voteSet.saveWechatSign", {
        ...this.wechatSigns,
        voteId: this.voteId,
      }).then((res) => {
        this.$store.commit("status/SET_URL", new Date().getTime());
        console.log(res);
        this.$message({
          message: "保存成功",
          type: "success",
          duration: 1000,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.voteSet {
  width: 820px;
  min-height: 550px;
  ::v-deep.el-form-item__label {
    padding-right: 40px;
  }
  .heiList_wrap {
    display: flex;
    align-items: center;
    border-radius: 30px;
    background-color: rgb(223, 224, 229);
    width: 150px;
    margin-top: 5px;

    .item {
      height: 30px;
      flex: 1;
      text-align: center;
      line-height: 30px;
      color: #fff;
      cursor: pointer;
    }
    .active {
      background-color: $themeColor;
      border-radius: 30px;
    }
  }

  .type_wrap {
    display: flex;
    align-items: center;
    border-radius: 30px;
    background-color: rgb(223, 224, 229);
    width: 230px;
    margin-top: 5px;

    .item {
      height: 30px;
      flex: 1;
      text-align: center;
      line-height: 30px;
      color: #fff;
      cursor: pointer;
    }
    .active {
      background-color: $themeColor;
      border-radius: 30px;
    }
  }
  .outerBox {
    width: 160px;
    height: 40px;
    display: flex;
    align-items: center;
    .showBox {
      border-radius: 30px;
      background-color: #dbdbdb;
      width: 100%;
      height: 30px;
      display: flex;
      color: #fff;
      font-weight: 600;
      .active {
        background-color: $themeColor;
      }
      .period {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 100%;
        border-radius: 30px;
        cursor: pointer;
      }
      .type {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 100%;
        border-radius: 30px;
        cursor: pointer;
      }
    }
  }
  .voteType {
    width: 250px;
  }
  .wxVote {
    margin-top: 5px;
    span {
      color: $deactiveColor;
    }
    .frequency {
      margin-left: 25px;
    }
  }
  .el-input {
    margin-left: 10px;
    width: 10%;
  }
  ::v-deep.el-input__inner {
    height: 30px;
    border-radius: 30px;
    width: 80px;
  }
  .el-row {
    width: 100%;
    .el-button {
      width: 80px;
      height: 30px;
      line-height: 0.5;
    }
  }
  .foucs {
    display: flex;
    span {
      margin-right: 10px;
    }
    .signup {
      margin-left: 120px;
    }
  }
}
</style>